<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>${tableComment}</title>
    <th:block th:include="include :: header"/>
</head>
<body>
<div id="app" v-cloak >
    <div class="d-head">
        <el-form ref="queryForm" :model="query" :inline="true" size="small" @submit.native.prevent class="clearfix">
            <el-form-item>
                <el-button type="primary" plain size="small" icon="el-icon-plus" @click="create">
                    添加
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-input v-model="query.name" placeholder="请输入查询名称" clearable @keyup.enter.native="search" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" plain @click="search">查询</el-button>
                <el-button icon="el-icon-refresh" plain @click="refresh">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="d-content">
        <el-table
                ref="table"
                :data="pageData.rows"
                v-loading="loading"
                element-loading-text="加载中，请稍后"
                border
                @row-click="handleRowClick"
                @selection-change="handleSelectionChange">
            <el-table-column type="index" label="ID"></el-table-column>

            <#list gridList as field>
                <#if field.formDict??>
                    <fast-table-column prop="${field.attrName}" label="${field.fieldComment!}" dict-type="${field.formDict}"></fast-table-column>
                <#else>
                    <el-table-column prop="${field.attrName}" label="${field.fieldComment!}" header-align="center" align="center"></el-table-column>
                </#if>
            </#list>

            <el-table-column label="操作" fixed="right" >
                <template slot-scope="scope">
                    <el-link size="mini" type="primary" @click="update(scope.$index, scope.row)">编辑</el-link>
                    <el-link size="mini" type="danger" @click="remove(scope.$index, scope.row)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="pageData.total > 0" :total="pageData.total" :page.sync="query.page"  :limit.sync="query.limit" @pagination="getPage"/>
    </div>


    <el-dialog :title="dialogFormTitle" v-if="dialogFormVisible" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
               width="45%" top="1vh">
        <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
            <el-form-item label="企业名称" prop="company.id">
                <company-single-select :com-id.sync="formData.company.id"></company-single-select>
            </el-form-item>
            <#list formList as field>
                <#if field.formType == 'text'>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-input v-model="formData.${field.attrName}" placeholder="${field.fieldComment!}"></el-input>
                    </el-form-item>
                <#elseif field.formType == 'textarea'>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-input type="textarea" v-model="formData.${field.attrName}"></el-input>
                    </el-form-item>
                <#elseif field.formType == 'editor'>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-input type="textarea" v-model="formData.${field.attrName}"></el-input>
                    </el-form-item>
                <#elseif field.formType == 'select'>
                    <#if field.formDict??>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <fast-select v-model="formData.${field.attrName}" dict-type="${field.formDict}" placeholder="${field.fieldComment!}"></fast-select>
                        </el-form-item>
                    <#else>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-select v-model="formData.${field.attrName}" placeholder="请选择">
                                <el-option label="请选择" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </#if>
                <#elseif field.formType == 'radio'>
                    <#if field.formDict??>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <fast-radio-group v-model="formData.${field.attrName}" dict-type="${field.formDict}"></fast-radio-group>
                        </el-form-item>
                    <#else>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-radio-group v-model="formData.${field.attrName}">
                                <el-radio :label="0">启用</el-radio>
                                <el-radio :label="1">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </#if>
                <#elseif field.formType == 'checkbox'>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-checkbox-group v-model="formData.${field.attrName}">
                            <el-checkbox label="启用" name="type"></el-checkbox>
                            <el-checkbox label="禁用" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                <#elseif field.formType == 'date'>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-date-picker type="date" placeholder="${field.fieldComment!}" v-model="formData.${field.attrName}"></el-date-picker>
                    </el-form-item>
                <#elseif field.formType == 'datetime'>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-date-picker type="datetime" placeholder="${field.fieldComment!}" v-model="formData.${field.attrName}"></el-date-picker>
                    </el-form-item>
                <#else>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-input v-model="formData.${field.attrName}" placeholder="${field.fieldComment!}"></el-input>
                    </el-form-item>
                </#if>
            </#list>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogClose">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')">提 交</el-button>
        </span>
    </el-dialog>
</div>
<script src="/js/components/pagination.js"></script>
<script src="/js/base/common.js"></script>
<script src="/js/mixins/table-page-crud.js"></script>
<script src="/js/${moduleName}/${functionName}/index.js"></script>
</body>
</html>